
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>JavaScript <span class="color_h1">作用域</span>
</h1>
<hr/>
<p class="intro">作用域是可访问变量的集合。</p>
<hr/>
<h2>JavaScript 作用域</h2>
<p>在 JavaScript 中, 对象和函数同样也是变量。</p>
<p><strong>在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。</strong></p>
<p>JavaScript 函数作用域: 作用域在函数内修改。</p>
<hr/>
<h2>JavaScript 局部作用域</h2>
<p>变量在函数内声明，变量为局部变量，具有局部作用域。</p>
<p>局部变量：只能在函数内部访问。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-comment">//</span><span class="hl-comment"> 此处不能调用 carName 变量</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">myFunction</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">carName</span><span class="hl-code"> = </span><span class="hl-quotes">"</span><span class="hl-string">Volvo</span><span class="hl-quotes">"</span><span class="hl-code">;
    </span><span class="hl-comment">//</span><span class="hl-comment"> 函数内可调用 carName 变量</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<p>因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。</p>
<p>局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。</p>
<hr/>
<h2> JavaScript 全局变量</h2>
<p>变量在函数外定义，即为全局变量。</p>
<p>全局变量有 <strong>全局作用域</strong>: 网页中所有脚本和函数均可使用。 </p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">carName</span><span class="hl-code"> = </span><span class="hl-quotes">"</span><span class="hl-string"> Volvo</span><span class="hl-quotes">"</span><span class="hl-code">;
 
</span><span class="hl-comment">//</span><span class="hl-comment"> 此处可调用 carName 变量</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">myFunction</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> 函数内可调用 carName 变量</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-brackets">}</span></div></div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<br/>
<p>如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。</p>
<p>以下实例中 carName 在函数内，但是为全局变量。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-comment">//</span><span class="hl-comment"> 此处可调用 carName 变量</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">myFunction</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">carName</span><span class="hl-code"> = </span><span class="hl-quotes">"</span><span class="hl-string">Volvo</span><span class="hl-quotes">"</span><span class="hl-code">;
    </span><span class="hl-comment">//</span><span class="hl-comment"> 此处可调用 carName 变量</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2> JavaScript 变量生命周期</h2>
<p>JavaScript 变量生命周期在它声明时初始化。</p>
<p>局部变量在函数执行完毕后销毁。</p>
<p>全局变量在页面关闭后销毁。</p>
<hr/>
<h2>函数参数</h2>
<p>函数参数只在函数内起作用，是局部变量。</p>
<hr/>
<h2>HTML 中的全局变量</h2>
<p>在 HTML 中, 全局变量是 window 对象，所以window 对象可以调用函数内的局部变量。
<p><strong>注意：</strong>所有数据变量都属于 window 对象。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-comment">//</span><span class="hl-comment">此处可使用 window.carName</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">myFunction</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">carName</span><span class="hl-code"> = </span><span class="hl-quotes">"</span><span class="hl-string">Volvo</span><span class="hl-quotes">"</span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2>你知道吗?</h2>
<p>
</p>
<table class="lamp"><tr>
<th style="width:34px"><img alt="Note" decoding="async" src="/images/lamp.jpg" style="height:32px;width:32px"/></th>
<td>你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。<br/>局部变量，包括 window 对象可以覆盖全局变量和函数。</td>
</tr></table> <div class="scroll-top"><a >返回顶部</a></div>
</p></div>

    </body>
    </html>
    